<template>
    <div class="sys-page">
        <app-title title="终端状态管理"  style="display:inline;"></app-title>
<el-button type="success" @click="refresh()" round style="float:right; margin-top:10px;" icon="el-icon-refresh">刷新</el-button>
            <el-table v-loading="loading" border :data="tableData.body" :row-class-name="tableRowClassName">
                <el-table-column prop="terminalIp" label="终端IP"  align="center"></el-table-column>
                <el-table-column prop="status" label="锁定状态"  align="center">
                     <template slot-scope="scope" >
                         <el-switch v-model="scope.row.status" active-color="#ff4949"
                            inactive-color="#13ce66" :formatter="statusSwitchFormatter"></el-switch>
                    </template>
                    
                </el-table-column>
                
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click="ok(scope.row.terminalIp, scope.row.status)">应用</el-button>
                    </template>
                </el-table-column>
            </el-table>
    </div>

</template>
<style>
  .el-table .warning-row {
    background: #F08080;
  }

  .el-table .success-row {
    background:#f0f9eb;
  }
</style>
<script>


export default {
    name: 'terminalstatus',
    data(){
        var validNumber= (rule, val, callback) => {
            var value = this.selectVal
            var pattern = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/
            if(value === ''){
                callback(new Error("请输入IP"))
            }else if(pattern.test(value) == false){
                console.log("validNumber value is "+ value)
                callback(new Error("请输入正确的IP格式, 例如:192.168.1.1"))
            }else {
                callback()
            }
       }
        return {
            validateRules:{ 
                selectValid:[{ validator: validNumber, trigger: 'blur', required: true, message:"请输入数字"}]
            },
            dialogTitle:"用户-终端黑名单管理",
            failcnt:1,
            loading: false,
            editTableShow: false,
            selectVal:1,
            tableData:{
                body:[],
                head:[],
                loading:true
            },

            errorMsg:"您的信息有误，请联系管理员修改",
            issafe:true
       
       }
    },

    mounted(){
        this.query()
    },

    methods:{
        refresh(){
            this.query()
        },
        statusSwitchFormatter: function (row, column, cellValue) {
            console.log(row.status)
            if(0 == row.status){
                return false;
            }else{
                return true;
            }
        },
        tableRowClassName({row, rowIndex}) {
          if(this.issafe === false){
            return 'warning-row';
          }else{
              return 'success-row'
          }
        },
        ok(ip, status){
            let oldStatus = status==true?0:1;
            let curStatus = status==true?1:0;
            let data = {
                terminalIp: ip,
                status: curStatus
            };

            this.HTTP.methods.apiPost("/terminalstatus/modify.shtml",data).then(res => 
                {
                   if (res.code != 200) {
                        this.$message(res.msg, 'error');
                        row.status = oldStatus;
                    } else {
                        if(true == status){
                            this.$message("锁定成功", 'success');
                        }else if(false== status){
                             this.$message("解锁成功", 'success');
                        }
                    }
                    this.loading = false
                }).catch(function (error) {
                    this.$message("网络超时", 'error')
                })
        },
        cancel(){
            this.editTableShow = false
            this.failcnt = 1
            this.selectVal = 1

        },
        query(){
            this.HTTP.methods.apiGet("/terminalstatus/findall.shtml?pageNow=1&pageCount=100").then(res =>
                {
                    if(res.code != 200){
                         this.$message(res.msg, 'error')
                    }else{
                        for(let i=0; i<res.data.length; i++){
                            res.data[i].status = res.data[i].status === 1?true:false; 
                        }
                        this.tableData.body = res.data
                        this.issafe = res.issafe

                    }
                }
            ).catch(function (error) {
                    this.$message("网络超时", 'error')
            })
        }
    }
}
</script>

    
